<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- name改为"李白",data中添加name属性,值为"李白" -->
    <input type="text" placeholder="请输入姓名" value="" v-module="name">
    <input type="text" placeholder="请输入年龄" value="" v-module="age">
    <input type="text" placeholder="请输入run" value="" v-module="run">
    <input type="text" placeholder="请输入word" value="" v-module="word">
    <input type="text" placeholder="请输入年龄" value="">

    <script>
        // 给任意 input 元素添加 v-module 属性，在 data 中添加相应属性，并实现双向数据绑定，生成的属性不可枚举。
        var data = {};
        var ipts = document.querySelectorAll('input[v-module]');
        document.body.oninput = function () {
            data[event.target.getAttribute('v-module')] = event.target.value;
        }
        for (var i = 0; i < ipts.length; i++) {
            ;(function (i) {
                Object.defineProperty(data, `${ipts[i].getAttribute('v-module')}`, {
                    configurable: true,
                    enumerable: false,
                    get () {
                        return ipts[i].value;
                    },
                    set (v) {
                        ipts[i].value = v;
                    }
                })
            })(i)
        }
    </script>
</body>
</html>